import React, {useState} from 'react';
import {GlobalOutlined} from "@ant-design/icons";
import {Divider, Pagination} from 'antd';
import Footer from "../../components/footer";
import {newsData} from "./newsConfig";
import './style.less'

const News = () => {
    const [pageState, setPageState] = useState(1);
    const handlePageChange = (page) => {
        setPageState(page)
    }
    return (
        <>
            <div className='news-wrapper'>
                <h1 style={{color: '#5352ed', fontSize: '18px', margin: 0}}>
                    <GlobalOutlined style={{color: '#5352ed', fontSize: '19px', marginRight: '5px'}}/>
                    新闻中心
                </h1>
                <Divider/>
                <div className='news-container'>
                    {newsData.slice((pageState-1)*10,pageState*10-1).map((item)=>(
                        <NewsItem key={item._id} title={item.title} date={item.date.split('T')[0]}/>
                    ))}
                </div>
                <div className='news-pagination'>
                    <Pagination onChange={handlePageChange} current={pageState} size="small" total={newsData.length}/>
                </div>
            </div>
            <Footer/>
        </>
    );
};

const NewsItem = ({title, date}) => {
    return (
        <div className='news-item'>
            <h1>{title}</h1>
            <h2>{date}</h2>
        </div>
    )
}

export default News;
